// 清除浮动
.clear:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
    zoom: 1;
}

// 文字尺寸
[font~="12"] {
    font-size: 12px;
}

[data-dpr="2"] [font~="12"] {
    font-size: 24px;
}

[data-dpr="3"] [font~="12"] {
    font-size: 36px;
}

[font~="14"] {
    font-size: 14px;
}

[data-dpr="2"] [font~="14"] {
    font-size: 28px;
}

[data-dpr="3"] [font~="14"] {
    font-size: 42px;
}

[font~="16"] {
    font-size: 16px;
}

[data-dpr="2"] [font~="16"] {
    font-size: 32px;
}

[data-dpr="3"] [font~="16"] {
    font-size: 48px;
}

[font~="18"] {
    font-size: 18px;
}

[data-dpr="2"] [font~="18"] {
    font-size: 36px;
}

[data-dpr="3"] [font~="18"] {
    font-size: 54px;
}

[font~="20"] {
    font-size: 20px;
}

[data-dpr="2"] [font~="20"] {
    font-size: 40px;
}

[data-dpr="3"] [font~="20"] {
    font-size: 60px;
}

[font~="30"] {
    font-size: 30px;
}

[data-dpr="2"] [font~="30"] {
    font-size: 60px;
}

[data-dpr="3"] [font~="30"] {
    font-size: 90px;
}

[font~="24"] {
    font-size: 24px;
}

[data-dpr="2"] [font~="24"] {
    font-size: 48px;
}

[data-dpr="3"] [font~="24"] {
    font-size: 72px;
}

[font~="30"] {
    font-size: 30px;
}

[data-dpr="2"] [font~="30"] {
    font-size: 60px;
}

[data-dpr="3"] [font~="30"] {
    font-size: 90px;
}

// 过度
.transition(@type, @time) {
    -webkit-transition: @type @time ease 0s;
    -moz-transition: @type @time ease 0s;
    -ms-transition: @type @time ease 0s;
    -o-transition: @type @time ease 0s;
    transition: @type @time ease 0s;
}

// 宽度换算
.width(@x) when (ispixel(@x)) {
    width: unit(@x / 75, rem)
}

.width(@x) when (default()) {
    width: @x
}

.min-width(@x) when (ispixel(@x)) {
    min-width: unit(@x / 75, rem)
}

.min-width(@x) when (default()) {
    min-width: @x
}

.max-width(@x) when (ispixel(@x)) {
    max-width: unit(@x / 75, rem)
}

.max-width(@x) when (default()) {
    max-width: @x
}

// 高度换算
.height(@x) when (ispixel(@x)) {
    height: unit(@x / 75, rem)
}

.height(@x) when (default()) {
    height: @x
}

.min-height(@x) when (ispixel(@x)) {
    min-height: unit(@x / 75, rem)
}

.min-height(@x) when (default()) {
    min-height: @x
}

.max-height(@x) when (ispixel(@x)) {
    max-height: unit(@x / 75, rem)
}

.max-height(@x) when (default()) {
    max-height: @x
}

.line-height(@x) when (ispixel(@x)) {
    line-height: unit(@x / 75, rem)
}

.line-height(@x) when (default()) {
    line-height: @x
}

// 内间距换算
.padding-top(@x) when (ispixel(@x)) {
    padding-top: unit(@x / 75, rem)
}

.padding-top(@x) when (default()) {
    padding-top: @x
}

.padding-right(@x) when (ispixel(@x)) {
    padding-right: unit(@x / 75, rem)
}

.padding-right(@x) when (default()) {
    padding-right: @x
}

.padding-bottom(@x) when (ispixel(@x)) {
    padding-bottom: unit(@x / 75, rem)
}

.padding-bottom(@x) when (default()) {
    padding-bottom: @x
}

.padding-left(@x) when (ispixel(@x)) {
    padding-left: unit(@x / 75, rem)
}

.padding-left(@x) when (default()) {
    padding-left: @x
}

.padding (@t, @r, @b, @l) {
    .padding-top(@t);
    .padding-right(@r);
    .padding-bottom(@b);
    .padding-left(@l);
}

// 外间距换算
.margin-top(@x) when (ispixel(@x)) {
    margin-top: unit(@x / 75, rem)
}

.margin-top(@x) when (default()) {
    margin-top: @x
}

.margin-right(@x) when (ispixel(@x)) {
    margin-right: unit(@x / 75, rem)
}

.margin-right(@x) when (default()) {
    margin-right: @x
}

.margin-bottom(@x) when (ispixel(@x)) {
    margin-bottom: unit(@x / 75, rem)
}

.margin-bottom(@x) when (default()) {
    margin-bottom: @x
}

.margin-left(@x) when (ispixel(@x)) {
    margin-left: unit(@x / 75, rem)
}

.margin-left(@x) when (default()) {
    margin-left: @x
}

.margin (@t, @r, @b, @l) {
    .margin-top(@t);
    .margin-right(@r);
    .margin-bottom(@b);
    .margin-left(@l);
}

// 定位换算
.top(@x) when (ispixel(@x)) {
    top: unit(@x / 75, rem)
}

.top(@x) when (default()) {
    top: @x
}

.right(@x) when (ispixel(@x)) {
    right: unit(@x / 75, rem)
}

.right(@x) when (default()) {
    right: @x
}

.bottom(@x) when (ispixel(@x)) {
    bottom: unit(@x / 75, rem)
}

.bottom(@x) when (default()) {
    bottom: @x
}

.left(@x) when (ispixel(@x)) {
    left: unit(@x / 75, rem)
}

.left(@x) when (default()) {
    left: @x
}

// 边框换算
.border(@x, @style, @color) when (ispixel(@x)) {
    border: unit(@x / 75, rem) @style @color
}

.border(@x, @style, @color) when (default()) {
    border: @x @style @color
}

.border-top(@x, @style, @color) when (ispixel(@x)) {
    border-top: unit(@x / 75, rem) @style @color
}

.border-top(@x, @style, @color) when (default()) {
    border-top: @x @style @color
}

.border-right(@x, @style, @color) when (ispixel(@x)) {
    border-right: unit(@x / 75, rem) @style @color
}

.border-right(@x, @style, @color) when (default()) {
    border-right: @x @style @color
}

.border-bottom(@x, @style, @color) when (ispixel(@x)) {
    border-bottom: unit(@x / 75, rem) @style @color
}

.border-bottom(@x, @style, @color) when (default()) {
    border-bottom: @x @style @color
}

.border-left(@x, @style, @color) when (ispixel(@x)) {
    border-left: unit(@x / 75, rem) @style @color
}

.border-left(@x, @style, @color) when (default()) {
    border-left: @x @style @color
}

// 圆角
.border-radius-top-left(@x) when (ispixel(@x)) {
    border-top-left-radius: unit(@x / 75, rem);
    -webkit-border-top-left-radius: unit(@x / 75, rem);
    -moz-border-radius-topleft: unit(@x / 75, rem);
}

.border-radius-top-left(@x) when (default()) {
    border-top-left-radius: @x;
    -webkit-border-top-left-radius: @x;
    -moz-border-radius-topleft: @x;
}

.border-radius-top-right(@x) when (ispixel(@x)) {
    border-top-right-radius: unit(@x / 75, rem);
    -webkit-border-top-right-radius: unit(@x / 75, rem);
    -moz-border-radius-topright: unit(@x / 75, rem);
}

.border-radius-top-right(@x) when (default()) {
    border-top-right-radius: @x;
    -webkit-border-top-right-radius: @x;
    -moz-border-radius-topright: @x;
}

.border-radius-bottom-left(@x) when (ispixel(@x)) {
    border-bottom-left-radius: unit(@x / 75, rem);
    -webkit-border-bottom-left-radius: unit(@x / 75, rem);
    -moz-border-radius-bottomleft: unit(@x / 75, rem);
}

.border-radius-bottom-left(@x) when (default()) {
    border-bottom-left-radius: @x;
    -webkit-border-bottom-left-radius: @x;
    -moz-border-radius-bottomleft: @x;
}

.border-radius-bottom-right(@x) when (ispixel(@x)) {
    border-bottom-right-radius: unit(@x / 75, rem);
    -webkit-border-bottom-right-radius: unit(@x / 75, rem);
    -moz-border-radius-bottomright: unit(@x / 75, rem);
}

.border-radius-bottom-right(@x) when (default()) {
    border-bottom-right-radius: @x;
    -webkit-border-bottom-right-radius: @x;
    -moz-border-radius-bottomright: @x;
}

.border-radius(@tl, @tr, @bl, @br) {
    .border-radius-top-left(@tl);
    .border-radius-top-right(@tr);
    .border-radius-bottom-left(@bl);
    .border-radius-bottom-right(@br);
}

// 3D变换
.translateX(@x) when (ispixel(@x)) {
    -webkit-transform+_: translateX(unit(@x / 75, rem));
    -moz-transform+_: translateX(unit(@x / 75, rem));
    -ms-transform+_: translateX(unit(@x / 75, rem));
    -o-transform+_: translateX(unit(@x / 75, rem));
    transform+_: translateX(unit(@x / 75, rem));
}

.translateX(@x) when (default()) {
    -webkit-transform+_: translateX(@x);
    -moz-transform+_: translateX(@x);
    -ms-transform+_: translateX(@x);
    -o-transform+_: translateX(@x);
    transform+_: translateX(@x);
}

.translateY(@x) when (ispixel(@x)) {
    -webkit-transform+_: translateY(unit(@x / 75, rem));
    -moz-transform+_: translateY(unit(@x / 75, rem));
    -ms-transform+_: translateY(unit(@x / 75, rem));
    -o-transform+_: translateY(unit(@x / 75, rem));
    transform+_: translateY(unit(@x / 75, rem));
}

.translateY(@x) when (default()) {
    -webkit-transform+_: translateY(@x);
    -moz-transform+_: translateY(@x);
    -ms-transform+_: translateY(@x);
    -o-transform+_: translateY(@x);
    transform+_: translateY(@x);
}

.translateZ(@x) when (ispixel(@x)) {
    -webkit-transform+_: translateZ(unit(@x / 75, rem));
    -moz-transform+_: translateZ(unit(@x / 75, rem));
    -ms-transform+_: translateZ(unit(@x / 75, rem));
    -o-transform+_: translateZ(unit(@x / 75, rem));
    transform+_: translateZ(unit(@x / 75, rem));
}

.translateZ(@x) when (default()) {
    -webkit-transform+_: translateZ(@x);
    -moz-transform+_: translateZ(@x);
    -ms-transform+_: translateZ(@x);
    -o-transform+_: translateZ(@x);
    transform+_: translateZ(@x);
}

.translate3d(@x, @y, @z) {
    .translateX(@x);
    .translateY(@y);
    .translateZ(@z);
}

.translate(@x, @y) {
    .translateX(@x);
    .translateY(@y);
}

.scale(@x) {
    -webkit-transform+_: scale(@x);
    -moz-transform+_: scale(@x);
    -ms-transform+_: scale(@x);
    -o-transform+_: scale(@x);
    transform+_: scale(@x);
}

.rotate(@x) {
    -webkit-transform+_: rotate(@x);
    -moz-transform+_: rotate(@x);
    -ms-transform+_: rotate(@x);
    -o-transform+_: rotate(@x);
    transform+_: rotate(@x);
}

.skewX(@x) {
    -webkit-transform+_: skewX(@x);
    -moz-transform+_: skewX(@x);
    -ms-transform+_: skewX(@x);
    -o-transform+_: skewX(@x);
    transform+_: skewX(@x);
}

.skewY(@x) {
    -webkit-transform+_: skewY(@x);
    -moz-transform+_: skewY(@x);
    -ms-transform+_: skewY(@x);
    -o-transform+_: skewY(@x);
    transform+_: skewY(@x);
}

.box-sizing() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

// 阴影
.box-shadow(@x, @y, @z, @color) when (ispixel(@x)), (@x = 0) and (ispixel(@y)), (@y = 0) and (ispixel(@z)), (@z = 0) and (iscolor(@color)) {
    -webkit-box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color;
    -moz-box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color;
    box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color;
}

.box-shadow-inset(@x, @y, @z, @color) when (ispixel(@x)), (@x = 0) and (ispixel(@y)), (@y = 0) and (ispixel(@z)), (@z = 0) and (iscolor(@color)) {
    -webkit-box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color inset;
    -moz-box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color inset;
    box-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color inset;
}

.text-shadow(@x, @y, @z, @color) when (ispixel(@x)), (@x = 0) and (ispixel(@y)), (@y = 0) and (ispixel(@z)), (@z = 0) and (iscolor(@color)) {
    text-shadow: unit(@x / 75, rem) unit(@y / 75, rem) unit(@z / 75, rem) @color;
}

// 动画
.animation-name (@x) {
    -webkit-animation-name: @x;
    -moz-animation-name: @x;
    -ms-animation-name: @x;
    -o-animation-name: @x;
    animation-name: @x;
}

.animation-duration(@x) {
    -webkit-animation-duration: @x;
    -moz-animation-duration: @x;
    -ms-animation-duration: @x;
    -o-animation-duration: @x;
    animation-duration: @x;
}

// 对话框
.alert {
    position: fixed;
    z-index: 100;
    .bottom(200px);
    .left(50%);
    text-align: center;
    .width(100%);
    .translate(-50%, -50%);
}

.alert-show {
    .animation-name(show);
    .animation-duration(400ms);
}

.alert-hide {
    .animation-name(hide);
    .animation-duration(400ms);
}

.alert-con {
    .max-width(500px);
    .padding(30px, 35px, 30px, 35px);
    .box-sizing();
    .border-radius(8px, 8px, 8px, 8px);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

// 确认框
.dialog-msg {
    position: fixed;
    z-index: 100;
    .top(0);
    .left(0);
    .height(100%);
    .width(100%);
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    .transition(all, 0.4s);
}

.dialog-show {
    opacity: 1;
    visibility: visible;
    .transition(all, 0.4s);
}

.confirm {
    position: absolute;
    .left(50%);
    .top(50%);
    .translate(-50%, -50%);
}

.confirm-box {
    .width(600px);
    .border-radius(10px, 10px, 10px, 10px);
    background-color: #fff;
    overflow: hidden;
    .scale(0.8);
    .transition(transform, 0.4s);
}

.confirm-box.confirm-box-normal {
    .scale(1);
    .transition(transform, 0.4s);
}

.confirm-text {
    .padding(60px, 60px, 60px, 60px);
    .line-height(40px);;
    .box-sizing();
}

.confirm-opt {
    a {
        .height(88px);
        .line-height(88px);
        text-align: center;
        border-top: 1px solid #ddd;
    }
    .quite {
        color: #000;
        border-right: 1px solid #ddd;
        font-weight: bold;
    }
    .sure {
        color: #da1a22;
        font-weight: bold;
    }
}